<template>
  <div class="siri absolute left-0 w-full flex items-center flex-col"
    :class="equ === 'pc' ? 'bottom-[100px]' : 'bottom-[120px]'">
    <div class="flc h-50px" :class="equ === 'pc' ? 'w-[350px]' : 'w-full'"><canvas ref="dom" class="w-full"></canvas>
    </div>
    <p class="text-white text-13px text-center w-full px-[12px] leading-[20px] min-h-[20px]">
      {{ text }}
    </p>
  </div>
</template>

<script
  lang="ts"
  setup
  name="Siri"
>
import { Parser, Player } from 'svga'
import { equ } from '../../../../package-env';

defineProps<{ text: string }>()

const getPath = (name, status) => {
  return new URL(`../../../assets/svga/${name}/${equ}/${status}.svga`, import.meta.url).href
}

const parser = new Parser()
const svgas = ref([])
const getParser = async () => {
  svgas.value = [
    await parser.load(getPath('siri', 'siri-in')),
    await parser.load(getPath('siri', 'siri-cycle'))
  ]
}
const status = ref(0)
// 初始化
const dom = ref(null)
const player = ref(null)
const init = async () => {
  await nextTick()
  player.value = new Player({
    container: dom.value,
    startFrame: 0,
    loop: 1
  })
  // 结束
  player.value.onEnd = async () => {
    if (status.value === 1) return
    player.value.clear()
    status.value = 1
    player.value.config.loop = 0
    await mountPlaer()
    player.value.start()
  }
  await mountPlaer()
  player.value.start()
}

const mountPlaer = async () => {
  await player.value.mount(svgas.value[status.value])
}


onMounted(async () => {
  await getParser()
  init()
})

</script>

<style module lang="scss"></style>
